import { getElementViewOffsetPosi } from '../../../../global/element/Func/getElementViewOffsetPosi';
import { add_remove_duration_time, transLate_X_length } from '../../sourCeData';
import { element_remove_anima_dataMana } from './cla_element_remove_anima_dataMana';

// 移除 元素

// 动画 内容 是

// 0 - 100 变小 opacity 0
// 0 - 40 font_size 0
// 40 -100 左 偏移

const element_remove_animaTag = 'element_remove_anima';

class element_remove_anima extends element_remove_anima_dataMana {
  get [Symbol.toStringTag]() {
    return element_remove_animaTag;
  }

  constructor(element) {
    super(element);
  }

  /**
   * 根据 当前 信息 创建
   * 移除 元素 动画
   */
  calculate_staticCss() {
    let curEl_posi = getElementViewOffsetPosi(this.targetEl);

    // 最大 长度
    let maxWidth = curEl_posi.width;

    // 最大 高度
    let maxHeight = curEl_posi.height;

    this.anima_obj.name = this.remove_anima_cla;

    // 修订 持续时间
    this.anima_obj.duration = add_remove_duration_time;

    // 修订 关键帧 集
    this.anima_obj.add_new_keyframeName([
      `${this.anima_obj.name}_font_size`,
      `${this.anima_obj.name}_mar_top_keyframe`,
      `${this.anima_obj.name}_opacity`,
      `${this.anima_obj.name}_transform`,
    ]);

    let ret = `
    .${this.anima_obj.name} {
        ${this.anima_obj.toCssString()}

        box-sizing: border-box;
    
        display: relative;

        overflow: hidden;
    }

    @keyframes ${this.anima_obj.keyframeName}{
        0%{
            width: ${maxWidth}px;
            height: ${maxHeight}px;
        }

        100%{
            width: 0px;
            height: 0px;
        }
    }

    @keyframes ${this.anima_obj.name}_font_size {   
        40%{
            font-size: 0px;
        } 

        100%{
            font-size: 0px;
        }
    }

    @keyframes ${this.anima_obj.name}_mar_top_keyframe{    
        100%{
            margin: 0;
            padding: 0;
        }
    }
        
    @keyframes ${this.anima_obj.name}_opacity {   
        90%{
            opacity: 0;
        }

        100%{
            opacity: 0;
        }
    }


    @keyframes ${this.anima_obj.name}_transform {
        60%{
            transform: translateX(-${transLate_X_length}px);
        }

        100%{
            transform: translateX(-${transLate_X_length}px);
        }
    }
`;

    console.log(ret);

    return ret;
  }
}

export { element_remove_anima };
